<template>
  <div>
    <h1 ref="hh">{{msg}}</h1>
    <!--使用组件-->
    <!--在App这个父组件中,找到子组件Car,然后给Car这个子组件传数据:通过属性的形式传数据-->
    <!--在组件上使用ref属性进行标识-->

    <!--在父组件中使用子组件 start-->
    <Car brand="宝马520" color="黑色" :price="10" ref="car1"></Car>
    <hr/>
    <Car brand="比亚迪汉" color="红色" :price="20" ref="car2"></Car>
    <br/>
    <button @click="printCarInfo">打印汽车信息</button>
    <!--在父组件中使用子组件 end-->
    <hr/>
    <User></User>
    <hr>
    <Vip></Vip>
  </div>
</template>


<script>
//导入组件
import X1 from "@/components/在父组件中获取子组件/X1.vue";
import Car from "@/components/在父组件中获取子组件/Car.vue";
import User from "@/components/mixin混入/User.vue";
import Vip from "@/components/mixin混入/Vip.vue";

export default {
  name : 'App',
  //注册组件
  components : {Car , User , Vip},
  data(){
    return {
      msg : '汽车信息'
    }
  },
  methods : {
    printCarInfo(){
      //获取子组件

      //在程序中使用$refs来获取子组件
      console.log(this.$refs.car1)
      console.log(this.$refs.car2)

      //获取子组件的属性
      console.log(this.$refs.car1.brand)
      console.log(this.$refs.car1.color)
      console.log(this.$refs.car1.price)

      //这个就不是组件了,是dom元素 ， ref可以使用在普通的html标签上,这样就是获取dom元素
      console.log(this.$refs.hh.innerText)
    }
  }
}

</script>

<!--定义全局样式，需要定义在App.Vue当中-->
<!--App根组件中的样式 style 不建议添加 scoped-->
<style>
  .active_color{
    color: red;
  }
</style>